import React, { useState } from 'react';
import { message } from 'antd';
import * as AntIconAll from '@ant-design/icons';
import { CopyToClipboard } from 'react-copy-to-clipboard';
// 从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。
// 在项目开发中，经常会有需求是通过数据循环渲染出动态icon，比如后台项目的侧边栏等，如果你是4.0以前版本的，就不用看了， 此处只针对4.0版本的antd
import { IconsWrap } from './StyleUi'
let icon:any = AntIconAll;

const renderIcon = (iconName: any) => {
  return React.createElement(icon[iconName])
}
// React.createElement(
//   Icon[route.icon]matchMediastyle: {
//     fontSize: '16px', color: '#08c'
//   }
// )
// https://www.cnblogs.com/gqx-html/p/12912162.html
// https://blog.csdn.net/weixin_43990297/article/details/114927564s
// https://blog.csdn.net/sunnyboysix/article/details/107239490

const iconItems = [
  {
    title: '方向性图标',
    list: [
      'StepBackwardOutlined','StepForwardOutlined','FastBackwardOutlined','FastForwardOutlined','ShrinkOutlined','ArrowsAltOutlined','DownOutlined','UpOutlined','LeftOutlined','RightOutlined','CaretUpOutlined','CaretDownOutlined','CaretLeftOutlined','CaretRightOutlined','UpCircleOutlined','DownCircleOutlined','LeftCircleOutlined','RightCircleOutlined','DoubleRightOutlined','DoubleLeftOutlined','VerticalLeftOutlined','VerticalRightOutlined','VerticalAlignTopOutlined','VerticalAlignMiddleOutlined','VerticalAlignBottomOutlined','ForwardOutlined','BackwardOutlined','RollbackOutlined','EnterOutlined','RetweetOutlined','SwapOutlined','SwapLeftOutlined','SwapRightOutlined','ArrowUpOutlined','ArrowDownOutlined','ArrowLeftOutlined','ArrowRightOutlined','PlayCircleOutlined','UpSquareOutlined','DownSquareOutlined','LeftSquareOutlined','RightSquareOutlined','LoginOutlined','LogoutOutlined','MenuFoldOutlined','MenuUnfoldOutlined','BorderBottomOutlined','BorderHorizontalOutlined','BorderInnerOutlined','BorderOuterOutlined','BorderLeftOutlined','BorderRightOutlined','BorderTopOutlined','BorderVerticleOutlined','PicCenterOutlined','PicLeftOutlined','PicRightOutlined','RadiusBottomleftOutlined','RadiusBottomrightOutlined','RadiusUpleftOutlined','RadiusUprightOutlined','FullscreenOutlined','FullscreenExitOutlined'
    ]
  },
  {
    title: '提示建议性图标',
    list: [
      'QuestionOutlined','QuestionCircleOutlined','PlusOutlined','PlusCircleOutlined','PauseOutlined','PauseCircleOutlined','MinusOutlined','MinusCircleOutlined','PlusSquareOutlined','MinusSquareOutlined','InfoOutlined','InfoCircleOutlined','ExclamationOutlined','ExclamationCircleOutlined','CloseOutlined','CloseCircleOutlined','CloseSquareOutlined','CheckOutlined','CheckCircleOutlined','CheckSquareOutlined','ClockCircleOutlined','WarningOutlined','IssuesCloseOutlined','StopOutlined'
    ]
  },
  {
    title: '编辑类图标',
    list: [
      'EditOutlined','FormOutlined','CopyOutlined','ScissorOutlined','DeleteOutlined','SnippetsOutlined','DiffOutlined','HighlightOutlined','AlignCenterOutlined','AlignLeftOutlined','AlignRightOutlined','BgColorsOutlined','BoldOutlined','ItalicOutlined','UnderlineOutlined','StrikethroughOutlined','RedoOutlined','UndoOutlined','ZoomInOutlined','ZoomOutOutlined','FontColorsOutlined','FontSizeOutlined','LineHeightOutlined','DashOutlined','SmallDashOutlined','SortAscendingOutlined','SortDescendingOutlined','DragOutlined','OrderedListOutlined','UnorderedListOutlined','RadiusSettingOutlined','ColumnWidthOutlined','ColumnHeightOutlined'
    ]
  },
  {
    title: '数据类图标',
    list: [
      'AreaChartOutlined','PieChartOutlined','BarChartOutlined','DotChartOutlined','LineChartOutlined','RadarChartOutlined','HeatMapOutlined','FallOutlined','RiseOutlined','StockOutlined','BoxPlotOutlined','FundOutlined','SlidersOutlined'
    ]
  },
  {
    title: '品牌和标识',
    list: [ 
      'AndroidOutlined','AppleOutlined','WindowsOutlined','IeOutlined','ChromeOutlined','GithubOutlined','AliwangwangOutlined','DingdingOutlined','WeiboSquareOutlined','WeiboCircleOutlined','TaobaoCircleOutlined','Html5Outlined','WeiboOutlined','TwitterOutlined','WechatOutlined','YoutubeOutlined','AlipayCircleOutlined','TaobaoOutlined','SkypeOutlined','QqOutlined','MediumWorkmarkOutlined','GitlabOutlined','MediumOutlined','LinkedinOutlined','GooglePlusOutlined','DropboxOutlined','FacebookOutlined','CodepenOutlined','CodeSandboxOutlined','AmazonOutlined','GoogleOutlined','CodepenCircleOutlined','AlipayOutlined','AntDesignOutlined','AntCloudOutlined','AliyunOutlined','ZhihuOutlined','SlackOutlined','SlackSquareOutlined','BehanceOutlined','BehanceSquareOutlined','DribbbleOutlined','DribbbleSquareOutlined','InstagramOutlined','YuqueOutlined','AlibabaOutlined','YahooOutlined','RedditOutlined','SketchOutlined',
    ]
  },
  {
    title: '网站通用图标',
    list: [
      'AccountBookOutlined','AimOutlined','AlertOutlined','ApartmentOutlined','ApiOutlined','AppstoreAddOutlined','AppstoreOutlined','AudioOutlined','AudioMutedOutlined','AuditOutlined','BankOutlined','BarcodeOutlined','BarsOutlined','BellOutlined','BlockOutlined','BookOutlined','BorderOutlined','BorderlessTableOutlined','BranchesOutlined','BugOutlined','BuildOutlined','BulbOutlined','CalculatorOutlined','CalendarOutlined','CameraOutlined','CarOutlined','CarryOutOutlined','CiCircleOutlined','CiOutlined','ClearOutlined','CloudDownloadOutlined','CloudOutlined','CloudServerOutlined','CloudSyncOutlined','CloudUploadOutlined','ClusterOutlined','CodeOutlined','CoffeeOutlined','CommentOutlined','CompassOutlined','CompressOutlined','ConsoleSqlOutlined','ContactsOutlined','ContainerOutlined','ControlOutlined','CopyrightOutlined','CreditCardOutlined','CrownOutlined','CustomerServiceOutlined','DashboardOutlined','DatabaseOutlined','DeleteColumnOutlined','DeleteRowOutlined','DeliveredProcedureOutlined','DeploymentUnitOutlined','DesktopOutlined','DingtalkOutlined','DisconnectOutlined','DislikeOutlined','DollarCircleOutlined','DollarOutlined','DownloadOutlined','EllipsisOutlined','EnvironmentOutlined','EuroCircleOutlined','EuroOutlined','ExceptionOutlined','ExpandAltOutlined','ExpandOutlined','ExperimentOutlined','ExportOutlined','EyeOutlined','EyeInvisibleOutlined','FieldBinaryOutlined','FieldNumberOutlined','FieldStringOutlined','FieldTimeOutlined','FileAddOutlined','FileDoneOutlined','FileExcelOutlined','FileExclamationOutlined','FileOutlined','FileGifOutlined','FileImageOutlined','FileJpgOutlined','FileMarkdownOutlined','FilePdfOutlined','FilePptOutlined','FileProtectOutlined','FileSearchOutlined','FileSyncOutlined','FileTextOutlined','FileUnknownOutlined','FileWordOutlined','FileZipOutlined','FilterOutlined','FireOutlined','FlagOutlined','FolderAddOutlined','FolderOutlined','FolderOpenOutlined','FolderViewOutlined','ForkOutlined','FormatPainterOutlined','FrownOutlined','FunctionOutlined','FundProjectionScreenOutlined','FundViewOutlined','FunnelPlotOutlined','GatewayOutlined','GifOutlined','GiftOutlined','GlobalOutlined','GoldOutlined','GroupOutlined','HddOutlined','HeartOutlined','HistoryOutlined','HomeOutlined','HourglassOutlined','IdcardOutlined','ImportOutlined','InboxOutlined','InsertRowAboveOutlined','InsertRowBelowOutlined','InsertRowLeftOutlined','InsertRowRightOutlined','InsuranceOutlined','InteractionOutlined','KeyOutlined','LaptopOutlined','LayoutOutlined','LikeOutlined','LineOutlined','LinkOutlined','Loading3QuartersOutlined','LoadingOutlined','LockOutlined','MacCommandOutlined','MailOutlined','ManOutlined','MedicineBoxOutlined','MehOutlined','MenuOutlined','MergeCellsOutlined','MessageOutlined','MobileOutlined','MoneyCollectOutlined','MonitorOutlined','MoreOutlined','NodeCollapseOutlined','NodeExpandOutlined','NodeIndexOutlined','NotificationOutlined','NumberOutlined','OneToOneOutlined','PaperClipOutlined','PartitionOutlined','PayCircleOutlined','PercentageOutlined','PhoneOutlined','PictureOutlined','PlaySquareOutlined','PoundCircleOutlined','PoundOutlined','PoweroffOutlined','PrinterOutlined','ProfileOutlined','ProjectOutlined','PropertySafetyOutlined','PullRequestOutlined','PushpinOutlined','QrcodeOutlined','ReadOutlined','ReconciliationOutlined','RedEnvelopeOutlined','ReloadOutlined','RestOutlined','RobotOutlined','RocketOutlined','RotateLeftOutlined','RotateRightOutlined','SafetyCertificateOutlined','SafetyOutlined','SaveOutlined','ScanOutlined','ScheduleOutlined','SearchOutlined','SecurityScanOutlined','SelectOutlined','SendOutlined','SettingOutlined','ShakeOutlined','ShareAltOutlined','ShopOutlined','ShoppingCartOutlined','ShoppingOutlined','SisternodeOutlined','SkinOutlined','SmileOutlined','SolutionOutlined','SoundOutlined','SplitCellsOutlined','StarOutlined','SubnodeOutlined','SwitcherOutlined','SyncOutlined','TableOutlined','TabletOutlined','TagOutlined','TagsOutlined','TeamOutlined','ThunderboltOutlined','ToTopOutlined','ToolOutlined','TrademarkCircleOutlined','TrademarkOutlined','TransactionOutlined','TranslationOutlined','TrophyOutlined','UngroupOutlined','UnlockOutlined','UploadOutlined','UsbOutlined','UserAddOutlined','UserDeleteOutlined','UserOutlined','UserSwitchOutlined','UsergroupAddOutlined','UsergroupDeleteOutlined','VerifiedOutlined','VideoCameraAddOutlined','VideoCameraOutlined','WalletOutlined','WhatsAppOutlined','WifiOutlined','WomanOutlined'
    ]
  }
]

// const iconsItemList = iconItems.map((item)=>
//     (
//       <div>
//         <h3>{item.title}</h3>
//         <ul>{
//           (item.list as any).map((icon: any, i: number) => (
//             <CopyToClipboard 
//               text={`<${icon} />`} 
//               onCopy={()=>{message.success(`<${icon} /> copied`)}} 
//               key={i}>
//               <li>
//                   <div className="icon-img">
//                     {
//                       renderIcon(icon)
//                     }
//                   </div>
//                   <div className="icon-title">{icon}</div>
//               </li>
//             </CopyToClipboard>
//           ))  
//         }</ul>
//       </div>
//     )
// )
// const icons = {
//   direction: [],
//   suggestion: [],
//   logo: [],
//   other: []
// };
// const iconsList = Object.keys(icons).map((v) =>
//   (icons as any)[v].map((icon: any, i: number) => (
//       <li key={i}>
//           <div className="icon-img">
//             {
//               renderIcon(icon)
//             }
//           </div>
//           <div className="icon-title">{icon}</div>
//       </li>
//   ))
// );

const Icons = () => {
  const [state, setState] = useState(-1);
  return (
    <IconsWrap>
      {
        iconItems.map((item, index)=>
        (
          <div key={index}>
            <h3>{item.title}</h3>
            <ul>{
              (item.list as any).map((icon: any, i: number) => (
                <CopyToClipboard 
                  text={`<${icon} />`} 
                  onCopy={()=>{ setState(i);message.success(
                      {
                        content: `<${icon} /> copied`,
                        onClose: ()=>{
                          setState(-1)
                        }
                      }
                    )
                  }} 
                  key={i}>
                  <li className={ state === i ? 'copied': ''}>
                      <div className="icon-img">
                        {
                          renderIcon(icon)
                        }
                      </div>
                      <div className="icon-title">{icon}</div>
                  </li>
                </CopyToClipboard>
              ))  
            }</ul>
          </div>
        )
    )
      }
    </IconsWrap>
  )
}

// const Icons = () => (
//   <IconsWrap>
//     { iconsItemList }
//   </IconsWrap>
// )
export default Icons;
